<template>
  <div class="page-info">
    <div class="search">
      <div class="search-box">
        <a-form :model="searchInfo" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item :name="labelMap['membershipName'].name" :label="labelMap['membershipName'].label">
                <a-input style="width: 90%;margin-left: 8px;" v-model:value="searchInfo.membershipName"
                  :placeholder="'请填写' + labelMap['membershipName'].label" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item :name="labelMap['membership'].name" :label="labelMap['membership'].label">
                <a-input style="width: 90%;margin-left: 8px;" v-model:value="searchInfo.membership"
                  :placeholder="'请填写' + labelMap['membership'].label" allow-clear />
              </a-form-item>
            </a-col>
            <a-col style="text-align: right; margin-bottom: 20px;">
              <a-space>
                <a-button type="primary" @click="query"> 查找</a-button>
                <a-button type="primary" @click="cancelQuery">清空</a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
    <div class="button" style="margin: 10px;">
      <a-space>
        <a-button type="primary" @click="editMembershipConfiguration('add')">新增</a-button>
        <a-button type="primary" danger @click="batchDelMembershipConfiguration">删除</a-button>
      </a-space>
    </div>
    <div class="content">
      <a-table :dataSource="dataSource" :columns="columns" :loading="loading" :row-key="(record) => record.id"
        :pagination="pagination" @change="handleTableChange" :scroll="{ y: 470 }" :row-selection="rowSelection">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <a-space>
              <a-button type="primary" size="small"
                @click="editMembershipConfiguration('update', record.id)">编辑</a-button>
              <a-popconfirm title="确认删除?" ok-text="确认" cancel-text="取消" @confirm="delMembershipConfiguration(record.id)"
                @cancel="cancel">
                <a-button type="primary" size="small" danger>删除</a-button>
              </a-popconfirm>
            </a-space>
            <span></span>
          </template>
          <template v-else-if="column.key === 'status'">
            <a-tag :key="record.status" :color="record.status == 1 ? '#87d068' : 'grey'">
              {{ record.status == 1 ? "有效" : "失效" }}
            </a-tag>
          </template>
        </template>
      </a-table>
      <MembershipConfigurationDetail ref="editInfo" :open="visible" :modelInfo="modelInfo" @handleOk="handleOk"
        @handleCancel="handleCancel"></MembershipConfigurationDetail>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  SearchInfo,
  pagination,
  columns,
  DataItem,
  ModelInfo,
  pageInfo,
} from "./membershipConfigurationListTs";
import { getMembershipConfigurationPage, deleteMembershipConfiguration } from "@/api/membershipInfo/membershipConfiguration/membershipConfigurationTs";
import { message } from "ant-design-vue";
import { getDictList } from "@/api/commonInfo/dictInfo/dictInfoTs";
import { dictInfo } from "@/views/commonInfo/dictInfo/dictInfoListTs";

const labelCol = ref({ span: 5 });
const wrapperCol = ref({ span: 19 });

let rowIds = [] as any;

const rowSelection = ref({
  checkStrictly: false,
  onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
    rowIds = selectedRowKeys;
  },
  onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected: boolean, selectedRows: DataItem[], changeRows: DataItem[]) => {
    console.log(selected, selectedRows, changeRows);
  },
});

const labelMap = ref<any>(
  {
    membershipName: { name: 'membershipName', label: '会员名称' },
    currentPrice: { name: 'currentPrice', label: '当前价格' },
    originalPrice: { name: 'originalPrice', label: '原始价格' },
    status: { name: 'status', label: '状态' },
    membership: { name: 'membership', label: '会员类型' },
  });

let searchInfo = ref<SearchInfo>({});

let statusList = ref<dictInfo[]>([]);

const getDictInfoList = (): void => {
  getDictList("is_valid").then((res) => {
    if (res.code == "200") {
      statusList.value = res.data.filter(
        (item: { belongTo: string }) => item.belongTo == "is_valid"
      );
    } else {
      message.error((res && res.message) || "查询列表失败！");
    }
  });
}

const cancelQuery = (): void => {
  searchInfo.value = {};
}

const query = (): void => {
  getMembershipConfigurationListPage(searchInfo.value, pagination.value);
}

const handleTableChange = (pagination): void => {
  getMembershipConfigurationListPage(searchInfo.value, pagination);
}

const delMembershipConfiguration = (ids: string): void => {
  deleteMembershipConfiguration(ids).then((res) => {
    if (res.code == "200") {
      message.success((res && "删除" + res.message) || "删除成功！", 3);
      getMembershipConfigurationListPage(searchInfo.value, pagination.value);
    } else {
      message.error((res && res.message) || "删除失败！", 3);
    }
  });
}

const batchDelMembershipConfiguration = (): void => {
  let ids = "";
  if (rowIds && rowIds.length > 0) {
    rowIds.forEach((item: string) => {
      ids += item + ",";
    });
    ids = ids.substring(0, ids.length - 1);
  } else {
    message.warning("请先选择数据！", 3);
    return;
  }
  delMembershipConfiguration(ids);
}

let loading = ref<boolean>(false);

let dataSource = ref();

const cancel = (e: MouseEvent): void => {
  console.log(e);
}

const getMembershipConfigurationListPage = (param: SearchInfo, cur: pageInfo): void => {
  loading.value = true;
  getMembershipConfigurationPage(param, cur.current, cur.pageSize)
    .then((res) => {
      if (res.code == "200") {
        dataSource.value = res.data.records;
        pagination.value.current = res.data.current;
        pagination.value.pageSize = res.data.size;
        pagination.value.total = res.data.total;
      } else {
        message.error((res && res.message) || "查询列表失败！");
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

const init = (): void => {
  getDictInfoList();
  //获取会员配置表页面数据
  getMembershipConfigurationListPage(searchInfo.value, pagination.value);
}

init();

let visible = ref<boolean>(false);

let modelInfo = ref<ModelInfo>({});

//新增和修改弹窗
const editMembershipConfiguration = (type: string, id?: number): void => {
  if (type == "add") {
    modelInfo.value.title = "新增明细";
    modelInfo.value.id = undefined;
  } else if (type == "update") {
    modelInfo.value.title = "修改明细";
    modelInfo.value.id = id;
  }
  modelInfo.value.confirmLoading = true;
  visible.value = true;
}

const handleOk = (v: boolean): void => {
  visible.value = v;
  getMembershipConfigurationListPage(searchInfo.value, pagination.value);
};

const handleCancel = (v: boolean): void => {
  visible.value = v;
};
</script>
<style lang="scss" scoped></style>
